import SwiftUI

// 色相、色调
struct AnimatableProperties_Hue: View {
    @State var angle: CGFloat = 0
    @State var progress: CGFloat = 0
    
    var body: some View {
        VStack(spacing: 30) {
            Text("Animatable Properties")
                .font(.largeTitle)
            
            Text("Hue")
                .font(.title)
                .foregroundColor(.gray)
                
            Text("Another way to change color is to change the hue on the color wheel by rotating the current point.")
                .padding()
                .font(.title2)
                .frame(maxWidth: .infinity)
                .foregroundColor(.black)
                .background(
                    Color.cyan
                )
            
            ZStack {
                RoundedRectangle(cornerRadius: 20)
                    .padding()
                    .foregroundColor(.blue)
                    // 旋转色相的时候，正角度表示逆时针旋转，负角度表示顺时针旋转。
                    .hueRotation(Angle(degrees: angle))
                    .onChange(of: progress) {
                         angle = 360 * $0 
                    }
                
                Text("Angle: \(angle)")
                    .font(.title3)
            }
            
            Spacer()
            
            Button(action: {
                // 0 ~ 359
                // 余数 - 限制数字范围：一定小于除数
                angle += 10
                angle = angle.truncatingRemainder(dividingBy: 360.0)
            }, label: {
                Text("Rotate")
                    .font(.title)
                    .padding(.bottom, 50)
            })
            
            // 无粒度变化过程 Slider
            Text("Progress: \(progress)")
            Slider(value: $progress)
                .padding(.horizontal)
                .padding(.bottom, 50)
            
        }
        
        
        
    }
}
